function getStyle(node, cssStyle) {
  return node.currentStyle
    ? node.currentStyle[cssStyle]
    : getComputedStyle(node)[cssStyle];
}
function move(ele, target, fn = () => {}) {
  /* 计数器 */
  let count = 0;
  for (let key in target) {
    if (key === "opacity") target[key] *= 100;
    /* 每开启一个定时器，count++ */
    count++;
    let timer = setInterval(function () {
      let current =
        key === "opacity"
          ? getStyle(ele, target) * 100
          : parseInt(getStyle(ele, key));
      let distance = (target[key] - current) / 10;
      distance = distance > 0 ? Math.ceil(distance) : Math.floor(distance);

      if (current === target[key]) {
        clearInterval(timer);
        count--;
        /* 当count===0时， 运动结束了*/
        if (count === 0) {
          // console.log("运动结束");
          fn();
        }
      } else {
        ele.style[key] =
          key === "opacity"
            ? (current + distance) / 100
            : current + distance + "px";
      }
    }, 10);
  }
}
const imgBox = document.querySelector(".banner>ul");
/* 获取承载焦点的盒子 */
const ddBox = document.querySelector(".banner>ol");
/* 获取可视区域的壳子 */
const banner = document.querySelector(".banner");
/* 准备变量 */
// 准备一个可视区域宽度
let banner_width = banner.clientWidth;
// 准备一个变量记录定时器返回值
let timer = 0;
//准备一个变量记录是第几张图片
let index = 1;
/* 生成焦点 */
setPoint();

function setPoint() {
  const num = imgBox.children.length;
  //生成若干个li放ol里
  const frg = document.createDocumentFragment();
  for (let i = 0; i < num; i++) {
    const li = document.createElement("li");
    li.setAttribute("type", "point");
    li.setAttribute("point_index", i + 1);
    if (i === 0) li.classList.add("active");
    /* 添加到文档碎片 */
    frg.appendChild(li);
  }
  ddBox.appendChild(frg);
  /*重新调整宽度  */
  ddBox.style.width = (num * 35) / 50 + "rem";
  /*  重新调整位置*/
  // ddBox.style.marginLeft = -ddBox.offsetWidth + 'px'
}
/* 复制元素 */
copyEle();

function copyEle() {
  let first = imgBox.firstElementChild.cloneNode(true);
  let last = imgBox.lastElementChild.cloneNode(true);
  /* 插入节点 */
  imgBox.appendChild(first);
  imgBox.insertBefore(last, imgBox.firstChild);
  /* 重新设置ul宽度 */
  imgBox.style.width = imgBox.children.length * 100 + "%";
  /* 重新设置图片首屏位置 */

  /* 设置imgBox的定位关系 */
  imgBox.style.left = -banner_width + "px";
}
/*4. 自动播放 */
autoPlay();

function autoPlay() {
  timer = setInterval(() => {
    index++;
    /* 通过move函数让元素动起来imgBox */
    move(
      imgBox,
      {
        left: -index * banner_width,
      },
      moveEnd
    );
  }, 2000);
}
/* 5.运动结束 */
function moveEnd() {
  // console.log(index);=====>index==6时弹回去
  if (index === imgBox.children.length - 1) {
    index = 1;
    // 5.1 瞬间定位回去
    imgBox.style.left = -index * banner_width + "px";
  }
  // 5.2 =====>index==0时弹到倒数第二张
  if (index === 0) {
    index = imgBox.children.length - 2;
    // 5.1 瞬间定位回去
    imgBox.style.left = -index * banner_width + "px";
  }
  /* 5.3 焦点配套 */
  for (let i = 0; i < ddBox.children.length; i++) {
    ddBox.children[i].className = "";
  }
  ddBox.children[index - 1].className = "active";
}
/* 6.移入移出 */
overOut();

function overOut() {
  banner.addEventListener("mouseover", () => {
    clearInterval(timer);
  });
  banner.addEventListener("mouseout", () => {
    autoPlay();
  });
}
/* 7.绑定事件 */
bindEvent();
// 事件委托的形式给banner 绑定一个点击事件
function bindEvent() {
  banner.addEventListener("click", (e) => {
    e = e || window.event;
    const target = e.target || e.srcElement;
    // 7.1判断点击的是右按钮
    if (target.className === "right") {
      index++;
      move(
        imgBox,
        {
          left: -index * banner_width,
        },
        moveEnd
      );
    }
    // 7.2判断点击的是左按钮
    if (target.className === "left") {
      index--;
      move(
        imgBox,
        {
          left: -index * banner_width,
        },
        moveEnd
      );
    }
    // 7.3判断点击的是焦点
    if (target.getAttribute("type") === "point") {
      // 拿到元素身上记录的索引；
      index = target.getAttribute("point_index") - 0; //因为拿到的是字符串
      move(
        imgBox,
        {
          left: -index * banner_width,
        },
        moveEnd
      );
    }
  });
}
